<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>vue学习</title>
</head>

<body>
	<div id="app">
	  <navigation-link v-slot="{url}">
			 <div>我是div</div>
			 {{message}}是vue实例，即父组件的变量
			 <br>
			 {{url}}是属于子组件
		</navigation-link>
		<base-layout>
				<template v-slot:header>
					<h1>Here might be a page title</h1>
				</template>
				
				<p>A paragraph for the main content.</p>
				<p>And another one.</p>
				
				<template v-slot:footer>
					<p>Here's some contact info</p>
				</template>
		</base-layout>
		<hr>
		<button @click = "showA">显示A</button>
		<button @click="showB">显示B</button>
		<keep-alive>
		<components :is="curCom"></components>
		</keep-alive>
		
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	    let comA = {
			template: `
			  <div>
			     <input type="text">
			  </div>
			`
		}
		 let comB = {
				template: `
			  <div>
			     我是B组件
			  </div>
			`
			}
		let navigationLink = {
			data() {
				return {
                   url: 'www.baidu.com'
				}
			},
			template: `
			<a v-bind:href="url" class="nav-link">
			<slot :url="url">默认</slot>
			</a>
			`
		}
		let baseLayout = {
			template: `
			  <div class="container">
				<header>
					<slot name="header"></slot>
				</header>
				<main>
					<slot></slot>
				</main>
				<footer>
					<slot name="footer"></slot>
				</footer>
			  </div>
			`
		}
		let app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue',
				curCom: 'com-a'
			},
			components:{
				'navigation-link': navigationLink,
				'base-layout': baseLayout,
				'com-a': comA,
                'com-b': comB
			},
			methods: {
				showA: function(){
					this.curCom = 'com-a'
				},
				showB(){
					this.curCom = 'com-b'
				}
			}
		})
	</script>

</body>

</html>